<template>
  <div>
    <a-form ref="form" :model="form" :rules="rules" @submit="handleSubmit">
      <a-form-item
        v-for="field in formFields"
        :key="field.id"
        :label="field.label"
        :name="field.id"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 20 }"
        label-align="left"
        :rules="[{ required: field.required, message: '必填字段' }]"
      >
        <!-- 附件 -->
        <template v-if="field.componentName == 'DDAttachment'">
          <div v-if="field.content" class="fileList">
            <div v-for="item in getUrl(field.content)" :key="item.id" class="list-li">
              <div class="list">
                <img :src="item.img" class="imgs" />
                <div
                  v-if="
                    item.name.substr(-1) === '3' ||
                    item.name.substr(-1) === '4' ||
                    item.name.substr(-1) === 'r' ||
                    item.name.substr(-1) === 'R' ||
                    item.name.substr(-1) === 'p' ||
                    item.name.substr(-1) === 'P' ||
                    item.name.substr(-1) === 'z' ||
                    item.name.substr(-1) === 'Z'
                  "
                  class="name"
                  @click="look(item)"
                >
                  {{ item.name }}
                </div>
                <!-- <a v-else :href="lookUrl(item)" target="_blank" class="name">{{ item.name }}</a> -->
                <div v-else class="name" @click="lookUrl(item)">{{ item.name }}</div>
                <!-- <button class="downLoad"><download-outlined /></button> -->
                <img
                  src="@/assets/img/icon_download_normal@2x.png"
                  alt=""
                  class="icon-select-date"
                  @click="download(item.url)"
                />
              </div>
            </div>
          </div>
          <div v-else>--</div>
        </template>
        <!-- 文本内容 -->
        <template v-else-if="field.componentName == 'TextRichField'">
          <div v-if="textType * 1 === 1">
            <div v-if="field.content" class="cc" v-html="field.content"></div>
            <div v-else>--</div>
          </div>
          <span v-else>{{ field.content || '--' }}</span>
        </template>
        <template v-else>
          <span>
            {{ field.content || '--' }}
            <span v-if="field.attr"> {{ JSON.parse(field.attr).unit }}</span>
          </span>
        </template>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { reactive, ref } from 'vue';
import { microNavigation } from '@/utils/util.js';
import { Form, Button, message } from 'ant-design-vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
export default {
  props: {
    formFields: {
      type: Array,
      required: true
    },
    textType: {
      // 区分pc h5
      type: String,
      required: ''
    }
  },
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-button': Button,
    'download-outlined': DownloadOutlined
  },
  setup(props) {
    function getType(val) {
      console.log(typeof val);
    }
    const iValue = ref(30237);
    if (process.env.VUE_APP_WEB_URLS === 'dev' || process.env.VUE_APP_WEB_URLS === 'test') {
      iValue.value = 30237;
    }
    if (process.env.VUE_APP_WEB_URLS === 'preview') {
      iValue.value = 32109;
    }
    if (process.env.VUE_APP_WEB_URLS === 'pro') {
      iValue.value = 29781;
    }
    const form = reactive({});
    const rules = reactive({});
    const listData = [];
    props.formFields.forEach(field => {
      form[field.id] = field.value;
      if (field.required) {
        rules[field.id] = [{ required: true, message: `${field.label}不能为空` }];
      }
    });
    // 处理url
    function getUrl(urlList) {
      let url = urlList.split('\\');
      let list = [];
      url.forEach(item => {
        list.push({
          name: item.slice(item.lastIndexOf('/') + 1),
          url: item,
          img: getFengmian(item)
        });
      });
      return list;
    }

    function getFengmian(val) {
      let type = val.slice(val.lastIndexOf('.') + 1);
      if (type === 'pdf') {
        return require('@/assets/img/popup_icon_pdf@2x.png');
      }
      if (type === 'xls' || type === 'xlsx') {
        return require('@/assets/img/icon_excel_48px@2x.png');
      }
      if (type === 'doc' || type === 'docx') {
        return require('@/assets/img/popup_icon_word@2x.png');
      }
      if (type === 'txt') {
        return require('@/assets/img/popup_icon_test@2x.png');
      }
      if (type === 'ppt' || type === 'pptx') {
        return require('@/assets/img/popup_icon_ppt@2x.png');
      }
      if (type === 'jpg' || type === 'jpeg' || type === 'png') {
        return require('@/assets/img/icon_img_48px@2x.png');
      }
      if (type === 'mp4') {
        return require('@/assets/img/icon_shipin_48px@2x.png');
      }
      if (type === 'mp3') {
        return require('@/assets/img/icon_weizhi_48px@2x.png');
      }
      if (type === 'ofd' || type === 'wps') {
        return require('@/assets/img/icon_wenjian_48px@2x.png');
      }
      if (
        type === 'rar' ||
        type === '7z' ||
        type === 'zip' ||
        type === 'RAR' ||
        type === 'ZIP' ||
        type === '7Z'
      ) {
        return require('@/assets/img/icon_wenjian_48px@2x.png');
      } else {
        return require('@/assets/img/icon_weizhi_48px@2x.png');
      }
    }

    const handleSubmit = () => {
      const { formFields } = props;
      props.form.validate(valid => {
        if (valid) {
          const formData = formFields.reduce((data, field) => {
            data[field.id] = form[field.id];
            return data;
          }, {});
          message.success('提交成功');
          this.$emit('submit', formData);
        } else {
          message.error('表单验证失败');
        }
      });
    };
    // 下载
    function download(url) {
      window.location.href = url;
    }
    // 预览
    //  处理url
    function lookUrl(item) {
      console.log(111, item);
      // return `https://ow365.cn/?i=${iValue.value}&ssl=1&pct=1&furl=${item.url}`;
      console.log(`https://ow365.cn/?i=${iValue.value}&ssl=1&pct=1&furl=${item.url}`);
      let notice = {
        appData: {
          springAppName: 'resourcePool',
          title: item.name,
          url: `https://ow365.cn/?i=${iValue.value}&ssl=1&pct=1&furl=${item.url}` //  带参数的完整链接
        }
      };
      let autoClose = true; // 是否自动关闭 默认 true 自动关闭
      window.microappSDK.openDialogWindow(notice, autoClose);
    }
    function look() {
      message.warning('文件类型不支持预览，请下载后查看');
    }
    const visible = ref(false);
    const changeVisible = type => {
      visible.value = type;
    };
    const getSelectedPerson = v => {
      let ret = getId(v);
      alreadyCheck.value = ret;
    };
    const getId = targetArr => {
      let ret;
      ret = targetArr.reduce((v, t) => {
        v.push(t.userBusinessId);
        return v;
      }, []);
      return ret;
    };
    const alreadyCheck = ref([
      '350318399022198784',
      '355435050931605504',
      '380729924589195265',
      '380729924589195275',
      '380729924589195285',
      '380729924589195290',
      '380729924589195295',
      '380729924589195300',
      '380729924589195305',
      '380729924589195310'
    ]);

    return {
      form,
      rules,
      iValue,
      getUrl,
      getType,
      lookUrl,
      look,
      getFengmian,
      visible,
      listData,
      download,
      handleSubmit,
      getSelectedPerson,
      changeVisible
    };
  }
};
</script>
<style lang="less" scoped>
.ant-avatar {
  margin: 0 0 0 16px;
}
.ant-list-items {
  border: 1px solid green;
}
.ant-list-split .ant-list-item {
  background: #fff;
  padding: 5px 0;
  margin: 10px 0;
  position: relative;
}
.downLoad {
  position: absolute;
  right: 20px;
  top: 10px;
}
.ant-form-item-label {
  text-align: left;
}
.imgs {
  width: 20px;
  margin-right: 8px;
}
.list {
  display: flex;
  align-items: center;
}
.list-li {
  padding: 13px 16px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 16px;
}
.fileList {
  max-height: 340px;
  overflow-y: auto;
}
.name {
  width: calc(100% - 46px);
  margin-right: 25px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  font-size: 14px !important;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: LEFT;
  color: rgba(0, 0, 0, 0.8) !important;
}
.icon-select-date {
  width: 16px;
  cursor: pointer;
  height: 16px;
}
/deep/ .ant-form-item {
  word-wrap: break-word;
  white-space: pre-line;
  overflow-wrap: break-word;
  // width: 166px !important;
  // margin-right: 18px;
}
</style>
<style lang="less">
.cc {
  // all: initial;
}
h1 {
  font-size: 32px !important;
  font-weight: unset !important;
  p {
    font-size: 16px !important;
  }
}
h2 {
  font-size: 24px !important;
  font-weight: unset !important;
  p {
    font-size: 16px !important;
  }
}
h3 {
  font-size: 18.72px !important;
  font-weight: unset !important;
  p {
    font-size: 16px !important;
  }
}
h4 {
  font-size: 16px !important;
  font-weight: unset !important;
  p {
    font-size: 16px !important;
  }
}
h5 {
  font-size: 13.28px !important;
  font-weight: unset !important;
  p {
    font-size: 16px !important;
  }
}
</style>
